<template>
  <div class="home">
    <Header/>
    <div class="container">
      <div class="sidebar system-bg-color-vertical" :style="{width: isCollapsed? 'auto' : '200px'}">
        <!-- 折叠控制 -->
        <div style="width: 100%;height: 18px;text-align: right;line-height: 18px;">
          <i title="折叠" @click="isCollapsed = !isCollapsed" class="el-icon-s-fold"
             style="z-index: 99;cursor: pointer;"/>
        </div>
        <!-- 菜单渲染 -->
        <div style="height: calc(100% - 18px);">
          <el-scrollbar style="height: 100%;width: 100%;">
            <SideBar :collapsed.sync="isCollapsed"/>
          </el-scrollbar>
        </div>
      </div>
      <div class="panel">
        <div class="body">
          <div style="height: 28px;width: 100%;" class="system-bg-color-horizontal">
            <TabBar/>
          </div>
          <div style="height:calc(100% - 30px);width: 100%">
            <el-scrollbar style="width: 100%;height: 100%;">
              <router-view/>
            </el-scrollbar>
          </div>
        </div>
        <!-- 底栏 -->
        <div class="footer system-bg-color-horizontal">
          &copy;copy right 2020
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "../components/Home/Header";
import SideBar from "../components/Home/SideBar";
import {mapState} from 'vuex'
import TabBar from "../components/Home/TabBar";

export default {
  name: "Home",
  data() {
    return {
      isCollapsed: false,
    }
  },
  components: {TabBar, SideBar, Header},
  methods: {},
  computed: {
    ...mapState('home', ['menuActive']),
  }
}
</script>

<style lang="scss" scoped>
* {
  box-sizing: border-box;
}

.home {
  height: 100vh;

  & .container {
    height: calc(100% - 60px);
    width: 100%;
    display: flex;
    flex-direction: row;

    & .sidebar {
      flex-shrink: 0;
    }

    & .panel {
      flex-grow: 1;
      width: 0;
      height: 100%;

      & .body {
        flex: 1;
        width: 100%;
        flex-wrap: nowrap;
        height: calc(100% - 30px);
      }

      & .footer {
        flex-grow: 0;
        width: 100%;
        box-sizing: border-box;
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-size: 14px;
        color: rgba(11, 11, 11, .4);
      }
    }
  }
}

/deep/ .el-scrollbar__wrap {
  overflow-x: hidden;
}
</style>